<template>
  <el-form :model="formData" label-width="120px">
    <el-form-item label="名称">
      <el-input v-model="formData.name" />
    </el-form-item>
    <el-form-item label="图片">
      <Tuku v-model="formData.img"></Tuku>
    </el-form-item>
    <el-form-item label="父类">
     <CategoryTree v-model="formData.parentId"></CategoryTree>
    </el-form-item>
    <el-form-item label="排序">
      <el-input-number v-model="formData.seq" :min="1" :max="99" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue"
import Tuku from "@/components/Tuku.vue";
import { ElMessage } from 'element-plus'
import { categoryApi } from '@/api'
import CategoryTree from "@/components/CategoryTree.vue";
import {useRoute} from 'vue-router'
const route = useRoute()
const formData = reactive({
  id:0,
  name: "",
  img: "",
  seq: 1,
  parentId: 0
})

onMounted(() => {
     
   formData.id  = Number(route.query.id)

    callCategoryApi()
})
const callCategoryApi = ()=>{

  categoryApi.select.call({id:formData.id}).then((res:any)=>{

    formData.name = res[0].name
    formData.img = res[0].img
  
    
    formData.seq = res[0].seq
    formData.parentId = res[0].parentId
  })
}

const onSubmit = () => {

  categoryApi.update.call(formData).then(() => {

    ElMessage.success('保存成功')
    //callCategoryApi()
  })


}

</script>